<template>
  <view class="search-form">
    <!-- Text -->
    <template v-if="componentMeta?.type === 'Text'">
      <text class="text-df">
        {{ tableRowData[componentMeta.key] }}
      </text>
    </template>

    <!-- Input -->
    <!-- componentMeta?.componentAttr?.type ??  -->
    <template v-else-if="componentMeta?.type === 'Input'">
      <AdvanceInput
        :component-meta="componentMeta"
        :table-row-data="tableRowData"
        :row-idx="rowIdx"
        :table-col-meta-list="tableColMetaList"
        @input="onInput"
        @blur="onBlur"
        @change="onChange"
      ></AdvanceInput>
    </template>

    <!-- Select -->
    <template v-else-if="componentMeta?.type === 'Select'">
      <AdvanceSelect
        :component-meta="componentMeta"
        :table-row-data="tableRowData"
        :row-idx="rowIdx"
        :table-col-meta-list="tableColMetaList"
        @change="onChange"
      ></AdvanceSelect>
    </template>
  </view>
</template>
<script setup>
import { computed } from "vue";
import AdvanceInput from "./components/advance-input/index.vue";
import AdvanceSelect from "./components/advance-select/index.vue";
const props = defineProps({
  componentMeta: {
    type: Object,
    default: () => ({}),
    required: true,
  },
  tableRowData: {
    type: Object,
    default: () => ({}),
  },
  rowIdx: {
    type: Number,
    default: 0,
  },
  validate: {
    type: Object,
  },
  tableColMetaList: {
    type: Array,
  },
});

const emits = defineEmits(["updateErrTip"]);
const callbackErr = (err) => {
  const errTip = err?.message ?? "";
  if (errTip) {
    console.error(errTip);
  }
  emits("updateErrTip", errTip);
};
const getMatchedEventFunc = (eventName, paramsObj) => {
  let eventFunc = () => {};
  if (props.componentMeta?.events) {
    const eventsFuncObj = props.componentMeta.events(paramsObj);
    if (eventsFuncObj.hasOwnProperty(eventName)) {
      eventFunc = eventsFuncObj[eventName];
    }
  }
  return eventFunc;
};
/**
 * @param {String} eventName
 * @param {Object} paramsObj
 * @param {val | e} eventParam
 *  */
const execMatchedEventFunc = (eventName, paramsObj, eventParam) => {
  const eventFunc = getMatchedEventFunc(eventName, paramsObj);
  eventFunc(eventParam);
};
const onInput = (val) => {
  //console.log(val,'触发了input');
  if (props.validate?.trigger === "input") {
    props.validate.validator(
      props.componentMeta.rules,
      props.tableRowData?.[props.componentMeta.key],
      callbackErr,
      props.tableRowData,
      props.tableColMetaList
    );
  }
  execMatchedEventFunc(
    "input",
    {
      val,
      componentMeta: props.componentMeta,
      rowIdx: props.rowIdx,
    },
    val
  );
};

const onChange = (val) => {
  //console.log(val,'触发了change');
  if (props.validate?.trigger === "change") {
    props.validate.validator(
      props.componentMeta.rules,
      props.tableRowData?.[props.componentMeta.key],
      callbackErr,
      props.tableRowData,
      props.tableColMetaList
    );
  }
  execMatchedEventFunc(
    "change",
    {
      val,
      componentMeta: props.componentMeta,
      rowIdx: props.rowIdx,
    },
    val
  );
};

const onBlur = (e) => {
  //console.log(val,'触发了blur');
  if (props.validate?.trigger === "blur") {
    props.validate.validator(
      props.componentMeta.rules,
      props.tableRowData?.[props.componentMeta.key],
      callbackErr,
      props.tableRowData,
      props.tableColMetaList
    );
  }
  execMatchedEventFunc(
    "blur",
    {
      e,
      componentMeta: props.componentMeta,
      rowIdx: props.rowIdx,
    },
    e
  );
};
const inputComponentAttrType = computed(() => {
  return props.componentMeta?.componentAttr?.type ?? "text";
});
</script>
<style lang="scss" scoped></style>
